<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>基础用法</span>
          </div>
          <el-row>
            <el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>文字描述</span>
          </div>
          <el-row>
            <el-switch
              v-model="value1"
              active-text="按月付费"
              inactive-text="按年付费">
            </el-switch>
          </el-row>

        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>禁用状态</span>
          </div>
          <el-row>
            <el-switch
              v-model="value3"
              disabled>
            </el-switch>
            <el-switch
              v-model="value4"
              disabled>
            </el-switch>
          </el-row>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script>
export default {
  name: "switch",
 data(){
     return {
       value:true,
       value1:true,
       value2:true,
       value3:true,
       value4:false,
 }
 },
}
</script>

<style scoped lang="scss">
.clearfix{
  font-size: 14px;
}
.el-col{
  margin-bottom: 20px;
}
.el-switch{
  margin-right: 10px;
}
</style>
